<template>
	<view>
		<view class="page_wrapper">
			<view v-for="(item, index) in pageList" :key="index">
				<view class="item">
					<view class="top">
						<view style="width: 80%">
							<u--text :text="item.houseName" size="14" lineHeight="28" bold :lines='1'></u--text>
						</view>
						<view class="state">
							<u-tag :text="item.ascription==='1'&&'业主'||item.ascription==='2'&&' 二房东'||'--'" size="mini"
								plain color="#bd3124" shape='circle' style="margin-right: 10rpx;" borderColor='#bd3124'></u-tag>
							<u-tag :text="surveyStateObj[item.surveyState]" size="mini" type="info" color="#fff"
								:bgColor="item.surveyState==4?'#eee' :'#f56e3d'" shape='circle'
								borderColor='transparent'></u-tag>
						</view>
					</view>
					<view class="top_mid">
						<view class="map" style="padding-right: 20rpx;">
							<u-icon size="18" name="map" color="#666"></u-icon>
							<u--text :text="item.locationAddress" size="13" lineHeight="28" color="#666"
								:lines='1'></u--text>

						</view>
			<!-- 			<view>
							<u--text :text="'距离:'+setMorKm(item.distance)" size="12" lineHeight="28"
								:lines='1'></u--text>
						</view> -->
					</view>
					<view class="btm">
						<view class="btm_time">
							<u--text :text="'租金'+item.rental" size="14" lineHeight="28" bold></u--text>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="padding-bottom: 40rpx;">
				<u-loadmore :status="status" />
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		survey
	} from '@/api/survey/index.js'
	export default {
		data() {
			return {
				pageList: [],
				searchParams: {
					// lng: '121.122162',
					// lat: '31.289757',
					pageNum: 1,
					pageSize: 10,
				},
				surveyStateObj: {
					1: "已抢单",
					2: "可勘察",
					3: "勘察完毕",
					4: "已取消",
				},
				status: 'loading',
			}
		},

		onLoad(options) {
			this.initSearch();

			// uni.getLocation({
			// 	type: 'wgs84',
			// 	highAccuracyExpireTime: 50,
			// 	success: async (obj) => {
			// 		let getState = obj.errMsg;
			// 		if (getState == 'getLocation:ok') {
			// 			this.searchParams.lng = obj.longitude;
			// 			this.searchParams.lat = obj.latitude;
			// 		}
			// 	},
			// 	fail(err) {
			// 		uni.showToast({
			// 			mask: true,
			// 			icon: 'none',
			// 			title: '请打开APP的位置权限！'
			// 		});
			// 	},
			// 	complete: () => {
			// 		this.initSearch()
			// 	}
			// });
		},
		onReachBottom(e) {
			this.searchParams.pageNum++
			this.getList()
		},
		methods: {
			// setMorKm(m) {
			// 	var n = ''
			// 	if (m) {
			// 		if (m >= 1000) {
			// 			n = (m / 1000).toFixed(2) + 'km'
			// 		} else {
			// 			n = m + 'm'
			// 		}
			// 	} else {
			// 		n = '0m'
			// 	}
			// 	return n
			// },
			initSearch() {
				this.status = 'loading'
				this.searchParams.pageNum = 1
				this.pageList = []
				this.getList()
			},
			scrolltolower(e) {
				
				this.searchParams.pageNum++
				this.getList()
			},
			onPullDownRefresh() {
				this.initSearch()
			},
		  async	getList() {
				if (this.status === 'nomore') return
				 const res = await survey.seizelist(this.searchParams);
				 
				 uni.stopPullDownRefresh()
				 if (res.data.code == 200) {
					 const list = res.data.data.records
				 	this.pageList = this.pageList.concat(list)
				 	if (this.pageList.length >= res.data.data.total) {
				 		this.status = 'nomore'
				 		return
				 	} else {
				 		this.status = 'loading'
				 	};
				 }
				
			},

	      

			gotoDetails({
				surveyTaskId: taskId,
				houseId,
				surveyState
			}) {
				//surveyState 抢单状态 1已抢单 2 可勘察 3 勘察完毕 4 已取消
				switch (surveyState) {
					case 1:
						uni.navigateTo({
							url: '/pages/survey/surveyTask?taskId=' + taskId
						})
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/survey/surveySubmit?taskId=' + taskId + '&houseId=' + houseId
						})
					default:
						break;
				}
			}
		},
	}
</script>
<style lang="scss">
	.page_wrapper {
		background-color: #eee;

		.item {
			text-align: center;
			padding: 20rpx 40rpx;
			margin-bottom: 20rpx;
			background-color: #fff;

			.top,
			.mid,
			.btm,
			.state {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.top_mid {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;

				.map {
					display: flex;
					justify-content: space-between;
				}
			}

			.btm_time {
				display: flex;

				/deep/ .u-count-down__text {
					color: #eeaf78;
					padding-left: 10rpx;
					font-size: 12px;
				}
			}
		}
	}
</style>